import React from 'react';
import { Cascader, message, } from 'antd';
import { useEffect, useState } from "react";
import Header from '../pages/detail/Head'
import { getDetails, getCart } from '../api/cart';
import {
    RadarChartOutlined,
    DiffOutlined,
    UsbFilled,
    DribbbleSquareFilled,
} from '@ant-design/icons';
import './producr.scss';
import Magnifier from '../componets/Magnifier';
import { useParams } from 'react-router-dom';

/**
 * 详情数据
 */
export default () => {
    /**
     * 跳转接受id
     */
    const { id } = useParams();
    // console.log(id);
    /**
//    * 获取id
//    */
    //     const { id } = useParams();
    /**
     * 接受所有的数据
     */
    const [listImg, setListImg] = useState([])
    /**
     * 接受右侧数据
     */
    const [data, setData] = useState([])
    /**
    * 接受右侧数据颜色0
    */
    const [setDataspecs] = useState([])
    /**
  * 接受右侧数据颜色0
  */
    /**
   * 接受右侧数据颜色0name
   */
    const [setDataspecsname] = useState([])
    /**
     * 接受默认值 图片
     */
    const [setListImgdata] = useState('')

    /**
     * 商品详情
     */
    const [details, setdetails] = useState([])
    /**
    * 商品详情
    */
    const [detailsImg, setdetailsImg] = useState([])
    /**
     * 地区
     */
    const [getIon, setgetIon] = useState([])
    /**
     * 初始化页面
     */
    useEffect(() => {
        (async () => {
            try {
                const data = await getDetails(id)
                console.log(data);
                console.log(data.oldPrice);
                setListImg(data.mainPictures)
                setData(data)
            } catch (error) {
                console.log(error);     
            }
        })()
    }, [])



    /**
     *加入购物车
     */
    const jump = async () => {
        try {
            const cart = await getCart({ count: 1, skuId: '300308871' })
            message.success('加入购物车')
            console.log(cart);
        } catch (error) { }
    }
    /**
     * 获取图片
     */
    const [Addimg, setAddimg] = useState([])
    /**
     *  赋值到页面
     */
    const addImg = (q) => {
        console.log(q);
        setAddimg(q)
    }
    /**
     * 点击消失
     */
    const addesc = () => {
        setAddimg('')
    }
    /**
     * 商品详情函数
     */

    function callback(key) {
        console.log(key);
    }
    /**
     * 接受鼠标的值
     */
    const [ImgList, setImgList] = useState('')
    /**
     * @param {} e 鼠标进入值 
     */
    let showImg = (e) => {
        const Img = e.target.src
        setImgList(Img)
    }

    /**
     *内容默认
    */
    function onChange(value) {
        console.log(value);
    }
    /**
     * 点击增加
     */
    const num = () => {
        data.videoScale++
    }
    /**
    * 点击减少
    */
    const Reduction = () => {
        data.videoScale--
    }
    /**
     * 鼠标悬浮上出现内容
     */
    const [name, setname] = useState('')

    const spanMou = (e) => {
        setname(e)
    }
    /**
     * 鼠标移除
     */
    const Remove = (e) => {
        e = ''
        setname(e)
    }

    const styles = {
        Item: { border: '1px dashed #ccc', margin: '10px 10px' },
        user: { color: '#fff' },
        content: { color: 'red', fontSize: '22px' }
    }

    /**
     * 点击显示价格
     */
    const btn = (val) => {
        console.log(val);
        styles.content = val
    }
    /**
     * index
     */
    const [Index, setIndex] = useState(0)

    /**
     * 图片index
     */
    const [imgIndex, setimgIndex] = useState(0)



    return (
        <div className='Motherandaby'>
            <div className='listt'>
                <div className='Left'>
                    <div className='Left-conter'>
                        <div className='Left-div'>
                            <Magnifier width={400} height={400} image={ImgList} />
                        </div>
                        <ul>
                            {
                                listImg.map((item, index) => (
                                    <li key={item}>
                                        <img src={item} alt=""
                                            onMouseMove={showImg}//当鼠标指针移动到该元素时执行
                                        />
                                    </li>
                                ))
                            }
                        </ul>
                    </div>
                    <div className='popularity'>
                        <ul>
                            <li className='cancel'>
                                <p>销量人气</p>
                                <p style={{ color: 'red' }}>200+</p>
                                <p><DribbbleSquareFilled />销量人气</p>
                            </li>

                            <li>
                                <p>商品评价</p>
                                <p style={{ color: 'red' }}>200+</p>
                                <p><DiffOutlined />查看评价</p>
                            </li>

                            <li>
                                <p>收藏人气</p>
                                <p style={{ color: 'red' }}>200+</p>
                                <p><RadarChartOutlined />收藏商品</p>
                            </li>

                            <li>
                                <p>品牌信息</p>
                                <p style={{ color: 'red' }}>200+</p>
                                <p><UsbFilled />品牌主页</p>
                            </li>
                        </ul>
                    </div>
                </div>
                {/* 右侧数据 */}
                <div className='right'>
                    <ul>
                        <li>
                            <h2>{data.name}</h2>
                            <p>{data.desc}</p>
                            
                            <p> <span style={{ color: 'red', fontSize: '20px' }}>￥{data.price}</span> <s>{data.oldPrice}</s></p>
                            <div className='internal-div'>
                                <p> 促销: 12月好物放送: App领券购买直降120元</p>

                                <Cascader options={getIon} fieldNames={{ label: 'name', value: 'code', children: 'areaList' }} />

                                <p>服务：··无忧退货··快速退款··免费包邮</p>
                            </div>
                            <div className='right-div'>
                                <div className="right-img" >

                                    <div>
                                        {
                                            data.specs && data.specs.map((item, index) =>
                                                <div key={item.name} className='Iwantparallel'>
                                                    <dt>{item.name}</dt>
                                                    <div className='dataopomlq'>
                                                        {
                                                            item.values.map((i, n) =>
                                                                i.picture ? <img key={i.name} onMouseOut={() => Remove(i.name)} onMouseMove={() => spanMou(i.name)} className={imgIndex == n ? 'active' : ''} onClick={() => setimgIndex(n)} src={i.picture} />
                                                                    : <div key={i.name} className="right-nameright"> <p onClick={() => { setIndex(n); btn(i.name) }} className={Index == n ? 'active' : ''}>  {i.name}</p></div>
                                                            )
                                                        }
                                                    </div>

                                                </div>
                                            )
                                        }
                                        {name}

                                    </div>

                                </div>
                            </div>
                            <p> 数量  <button type="primary" className='Butt' onClick={() => Reduction()} >-</button> {data.videoScale} <button type="primary" className='Butt' onClick={() => num()} >+</button>  </p>
                            <button type="primary" onClick={() => jump()} className='Button'>
                                加入购物车
                            </button>
                        </li>
                    </ul>
                </div>
            </div>
            <Header></Header>

        </div>
    )
}

